<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script>
        console.log("本地cookie",document.cookie)
        let paramsAll = {
            params:{
                page:1,
                count:50
            }
        }
        function nextPage() {
            paramsAll.params.page++
            $(".currPage").html(paramsAll.params.page)
        }
        function upPage() {
            paramsAll.params.page--
            console.log("===", paramsAll.params.page)
            if (paramsAll.params.page===0){
                paramsAll.params.page = 1
                return false
            }
            $(".currPage").html(paramsAll.params.page)
            return true
        }
        function loadNetData() {
            // 加载数据
            axios.get("/webDemo/book/getAllBooks", paramsAll).then(function (info) {
                let books = info.data.data.list
                let count = info.data.data.count
                $(".count").html(`   总条数${count}`)
                let name = info.data.data.name
                $(".userName").html(name)
                let email = info.data.data.email
                $(".userEmail").html(email)
                // 将books 渲染到页面上
                for (let i = 0; i < books.length; i++) {
                    let item = books[i]
                    $(".books").append(`<li class=\"item\">\n
                            <img src=\"${item.img}\"/>\n
                            <div class="titleRoot">
                                <div class=\"title\">${item.name}</div>\n
                                <div class=\"price\">￥${item.price}</div>\n
                            </div>
                            <div class="addCar" id="${item.id}">
                            加入购物车
                            </div>
                           </li>`)
                }
                $(".addCar").each(function (it) {
                    let id = this.id
                    $(this).click(function () {
                        // 将 id作为参数 请求 加入购物车接口
                        // 商品id 数量 用户id
                        axios.post("/webDemo/car/addBook", {id:id})
                            .then(function (info) {
                                let code = info.data.code;
                                // alert(info.data.msg)
                            }
                        )
                    })
                })
            }).catch(function (e) {

            })
        }
        $(function () {
            // 打开页面后请求数据
            $(".currPage").html(paramsAll.params.page)
            loadNetData()
            $(".nextPage").click(function () {
                // 访问下一页的数据
                nextPage()
                $(".books").empty()
                loadNetData()
            })
            $(".upPage").click(function () {
                // 访问下一页的数据
                let b = upPage()
                if (b){
                    $(".books").empty()
                    loadNetData()
                }
            })
            $(".toCar").click(function () {
                // 点击购物车打开购物车页面
                window.location.href = "/webDemo/sub/car.html"
            })
            $(".toPerson").click(function (){
                // 点击个人中心打开个人信息页面
                window.location.href = "/webDemo/sub/user-info.html"
            })
        })
    </script>
    <style>
        ul{
            list-style: none;
        }
        .books{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .item{
            border: solid 1px #ccc;
            width: 200px;
            height: 300px;
        }
        .titleRoot{
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
        }
        .addCar{
            width: 100%;
            height: 45px;
            background-color: #f23030;
            text-align: center;
            line-height: 45px;
        }
        .title{
            height: 21px;
            line-height: 21px;
            overflow: hidden;
        }
        .footer{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .car{
            width: 30px;
            height: 30px;
        }
        .person{
            width: 30px;
            height: 30px;
        }
        .toCar,.toPerson{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div style="display: flex;width: 1200px;justify-content: space-around">
    <div>用户昵称：<label class="userName"></label>   邮箱：<label class="userEmail"></label></div>
    <div class="toCar" style="display: flex;justify-content: center;align-items: center" >
        <img class="car" src="/webDemo/img/ic_car.png"/>购物车
    </div>
    <div class="toPerson" style="display: flex;justify-content: center;align-items: center" >
        <img class="person" src="/webDemo/img/ic_person.png"/>个人中心
    </div>
</div>
<ul class="books">
</ul>
<div class="footer">
    <button class="upPage">上一页</button>
    <button class="nextPage">下一页</button>
    <div>当前页</div><label class="currPage"></label>
    <div class="count"></div>
</div>
</body>
</html>